<!doctype html>
<html>
  <head>
    <script type="module">
      import "@uirouter/angularjs/lib-esm/index.js";
      import "@uirouter/angularjs/lib-esm/angular.js";
    </script>

    <style>
      .active {
        color: red;
        text-decoration: underline;
      }
    </style>
  </head>

  <body ng-app="helloWorld">
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a>

    <ui-view></ui-view>
    <script>
      var myApp = angular.module("helloWorld", ["ui.router"]);

      myApp.config(function ($stateProvider) {
        var helloState = {
          name: "hello",
          url: "/hello",
          template: /* HTML */ ` <h3>hello world!</h3> `,
        };

        var aboutState = {
          name: "about",
          url: "/about",
          template: /* HTML */ ` <h3>Its the UI-Router hello world app!</h3> `,
        };

        $stateProvider.state(helloState);
        $stateProvider.state(aboutState);
      });
    </script>
  </body>
</html>
